<template>
  <div class="singerbox">
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <!-- 歌手页 -->
    <van-dropdown-menu active-color="#ee0a24">
      <!-- <van-dropdown-item v-model="value1" :options="option1" /> -->
      <van-dropdown-item title="歌手" v-model="value1" :options="option1" />
      <van-dropdown-item title="地区" v-model="value2" :options="option2" />
      <!-- <van-dropdown-item v-model="value2" :options="option2" /> -->
    </van-dropdown-menu>
    <van-index-bar :index-list="leftList">
      <div v-for="(item, index) in rightList" :key="index">
        <van-index-anchor v-show="item.data" :index="item.name" />
        <van-cell v-for="value in item.data" :key="value.id">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="van-cell-title" @click="singerID(value.id)">
              <img width="45" height="45" :src="value.img1v1Url" />
              <span class="custom-title">{{ value.name }}</span>
            </div>
          </template>
        </van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { getArtistlist } from "../api/singer";
import headerNav from "../components/base/headerNav.vue";
export default {
  data() {
    return {
      leftList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"],
      rightList: [
        // {
        //   name:"A",
        //   data:[]
        // }
      ],
      value1: -1,
      value2: -1,
      option1: [
        { text: "全部", value: -1 },
        { text: "男歌手", value: 1 },
        { text: "女歌手", value: 2 },
        { text: "乐队", value: 3 },
      ],
      option2: [
        { text: "全部", value: -1 },
        { text: "华语", value: 7 },
        { text: "欧美", value: 96 },
        { text: "日本", value: 8 },
        { text: "韩国", value: 16 },
      ],
    };
  },
  components: {
    headerNav,
  },
  methods: {
    ArtistListFun() {
      for (let i = 0; i < this.leftList.length; i++) {
        this.rightList.push({
          name: this.leftList[i],
        });
      }
    },
    singerID(id) {
      this.$router.push({
        name: "SingerDetails",
        params: {
          id: id,
        },
      });
    },
  },
  watch: {
    value1: {
      immediate: true,
      handler(newvalue) {
        this.ArtistListFun(); //构建对象

        for (let i = 0; i < this.leftList.length; i++) {
          getArtistlist({
            type: newvalue,
            area: this.value2,
            initial: this.leftList[i],
          }).then((data) => {
            let index = this.rightList.findIndex(
              (item) => item.name == this.leftList[i]
            );
            // Vue.set( target, propertyName/index, value )
            //   向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
            // this.rightList[index].data = data.artists; //不合理写法
            this.$set(this.rightList[index], "data", data.artists);
          });
        }
      },
    },
    value2: {
      immediate: true,
      handler(newvalue) {
        this.ArtistListFun(); //构建对象

        for (let i = 0; i < this.leftList.length; i++) {
          getArtistlist({
            type: this.value1,
            area: newvalue,
            initial: this.leftList[i],
          }).then((data) => {
            let index = this.rightList.findIndex(
              (item) => item.name == this.leftList[i]
            );
            // Vue.set( target, propertyName/index, value )
            //   向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
            // this.rightList[index].data = data.artists; //不合理写法
            this.$set(this.rightList[index], "data", data.artists);
          });
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.van-cell-title {
  display: flex;
  align-items: center;
  span {
    margin-left: 20px;
  }
}
.van-index-anchor {
  background-color: #d9dadb;
}
.van-index-bar {
  & /deep/ span {
    padding: 22px 8px 0 16px;
  }
}
</style>